<!--
 * @Description: 特材运输清单
 * @Autor: wangwangwang
 * @Date: 2021-04-06 17:48:45
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-04-09 09:38:38
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display: flex">
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
                <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
              </div>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span style="margin-right: 12px">公司</span>
                  <el-select v-model="tableParam.companyId" placeholder="请选择" @change="changeCompany">
                    <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">站点</span>
                  <el-select v-model="tableParam.stationids" multiple placeholder="请选择">
                    <el-option v-for="item in stationList" :key="item.id" :label="item.stationName" :value="item.id"></el-option>
                  </el-select>
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">查询时间段</span>
                  <el-date-picker v-model="tableParam.time" unlink-panels value-format="yyyy-MM-dd HH:mm:ss"  type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), initData()">查 询</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="card">
            <div v-show="dataSource.length" v-loading="tableLoading" class="card_info" :style="style">
              <div v-for="(item, index) in dataSource"  :key="index" style="margin-bottom: 30px;">
                <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border show-summary stripe style="width: 100%" :data="item" tooltip-effect="dark">
                  <el-table-column prop="company" label="单位"></el-table-column>
                  <el-table-column prop="stationName" label="站点"></el-table-column>
                  <el-table-column prop="productName" label="特材成品"></el-table-column>
                  <el-table-column prop="productType" label="特材型号"></el-table-column>
                  <el-table-column prop="needNum" label="需求总量(吨)"></el-table-column>
                  <el-table-column prop="recNum" label="收货总量(吨)"></el-table-column>
                  <el-table-column prop="returnNum" label="返料总量(吨)"></el-table-column>
                </el-table>
              </div>
            </div>
            <el-table v-show="!dataSource.length" :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border show-summary stripe style="width: 100%" :data="dataSource" tooltip-effect="dark">
              <el-table-column prop="company" label="单位"></el-table-column>
              <el-table-column prop="stationName" label="站点"></el-table-column>
              <el-table-column prop="productName" label="特材成品"></el-table-column>
              <el-table-column prop="productType" label="特材型号"></el-table-column>
              <el-table-column prop="needNum" label="需求总量(吨)"></el-table-column>
              <el-table-column prop="recNum" label="收货总量(吨)"></el-table-column>
              <el-table-column prop="returnNum" label="返料总量(吨)"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { queryTradeStatistics } from "@/api/smart/specialmaterial/supplier.js";
import { permissionsCompanyList } from "@/api/common.js";
import { getStationByCompanyId } from "@/api/basicConfig/barcode.js";
export default {
  mixins: [mixin],
  data() {
    return {
      pagesType: 0,
      dataSource: [],
      stationList: [],
      companyList: [],
    };
  },
  async created() {
    this.companyList = await permissionsCompanyList();
    this.tableParam = { ...this.tableParam, companyId: "", stationids: [], time: [] };
  },
  methods: {
    initData () {
      if (!this.tableParam.time.length) {
        this.$message.warning('请选择查询时间段')
        return
      }
      const params = {
        companyId: this.tableParam.companyId,
        stationids: this.tableParam.stationids,
        startTime: this.tableParam.time[0],
        endTime: this.tableParam.time[1],
      }
      queryTradeStatistics(params).then(res => {
        if (res.code === 1001) {
          const newData = this.formatArry(res.data.list, 'stationId');
          const newArry = []
          for (let i in newData) {
            newArry.push(newData[i])
          }
          this.dataSource = newArry;
        }
      });
    },
    changeCompany(id) {
      getStationByCompanyId({ id }).then((res) => {
        if (res.code === 1001) {
          this.stationList = res.data;
          if (res.data.length === 0) {
            this.$message.warning('该公司下没有站点');
          }
        }
      });
    },
    formatArry (initialArr, pro) {
      if (!(initialArr instanceof Array)) {
        return "请传入正确格式的数组";
      }
      if (!pro) {
        return "请传入对象属性";
      }
      return initialArr.reduce((acc, item) => {
        let currentVal = item[pro]; 
        acc[currentVal] || (acc[currentVal] = []);
        acc[currentVal].push(item);
        return acc;
      }, {});
    }
  },
};
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
  width: 240px;
}
.table_link {
  margin: 0 10px;
  color: $bg_color;
  cursor: pointer;
}

.table_link:hover {
  opacity: 0.8;
}
</style>

